<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <!-- 左边插槽 -->
        <template #left>
          <span>总记录数: {{ total }}条</span>
        </template>
        <!-- 右边插槽 -->
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/import')">excel导入</el-button>
          <el-button type="danger" size="small" @click="handleExport">excel导出</el-button>
          <el-button type="primary" size="small" @click="showDialog=true">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 数据内容 -->
      <el-card style="margin-top: 10px;">
        <el-table border :data="list">
          <el-table-column label="序号" type="index" sortable="" :index="changeIndex" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column label="聘用形式" prop="formOfEmployment" sortable="" :formatter="formOfEmp" />
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="" :formatter="formOfTime" />
          <!-- 账户状态：根据el-switch实现 -->
          <el-table-column label="账户状态" prop="enableState" sortable="">
            <template #default="{ row }">
              <!-- el-switch状态管理 -->
              <el-switch v-model="row.enableState" :inactive-value="2" :active-value="1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="handleRole(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination :total="total" layout="prev, pager, next" :current-page="queryData.page" :page-size="queryData.size" @current-change="changePage" />
        </div>
      </el-card>
      <add-employees :show-dialog.sync="showDialog" />
      <AssignRole :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
    </div>
  </div>
</template>

<script>
// 一、目标：-------入职时间初始化-------
// 1.给el-table-column动态绑定formatter属性来实现初始化时间
// 2.定义一个方法根据时间戳渲染出初始化时间
// 二、目标：-------删除员工信息-------
// 1.给删除按钮绑定点击事件
// 2.导入删除员工信息的接口
// 3.提示用户是否删除员工信息
// 4.点击确定，删除成功后调用接口删除当前员工
// 5.提示用户删除成功，刷新列表
import moment from 'moment'
import AddEmployees from './components/AddEmployees.vue'
import { reqGetEmployeeList, reqDelEmployee } from '@/api/employees'
// 导入衡量员工正式非正式的数组
import Types from '@/api/constant/employees'
import AssignRole from './components/AssignRole.vue'
export default {
  name: 'Employees',
  components: {
    AddEmployees,
    AssignRole
  },
  data () {
    return {
      // 员工列表数据
      list: [],
      // 列表总数
      total: 0,
      // 查询参数
      queryData: {
        page: 1,
        size: 10
      },
      // 控制新增员工弹窗显示
      showDialog: false,
      // 控制角色添加的弹窗
      showRoleDialog: false,
      userId: ''
    }
  },
  created () {
    this.loadEmployeeList()
  },
  methods: {
    // 功能6.---把后端返回的员工数据转换成Excel需要的格式
    translateData (list) {
      // 定义对象装表头和主要内容
      const result = {
        title: [],
        data: []
      }
      // 中文和英文转换媒介
      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 表头数据为headers对象里的所有的key
      result.title = Object.keys(headers)
      // 整理出主要数据
      // 循环遍历后端传过来的整体数据
      list.forEach(item => {
        // 定义数组装中英文转换后的主要数据的值(result里的data)
        const row = []
        // 决定导出内容的顺序
        // 循环遍历表头里的值
        result.title.forEach(tname => {
          // 此enKey表示headers键所对应的值
          const enKey = headers[tname]
          // value表示整个数组中键为enKey的值
          let value = item[enKey]
          // 处理特殊值
          if (enKey === 'formOfEmployment') {
            // 找到相同id的对象
            const text = Types.hireType.find(item => item.id === Number(value))
            // 对象为true
            if (text) {
              // formOfEmployment的值就是hireType里的value
              value = text.value
            } else {
              value = '其他'
            }
            // 处理时间
          } else if (['timeOfEntry', 'correctionTime'].includes(enKey)) {
            try {
              // 将时间改为YYYY-MM-DD形式
              value = moment(value).format('YYYY-MM-DD')
            } catch {
              value = '无效日期'
            }
          }
          // 把值赋值给空数组row
          row.push(value)
        })
        // 把row赋值给result里的data
        result.data.push(row)
      })
      return result
    },
    // 功能7.---导出员工信息
    async handleExport () {
      // 点击事件后调用接口接收数据
      const ret = await reqGetEmployeeList({ page: 1, size: 100 })
      // 把数据传过去转换
      const info = this.translateData(ret.data.rows)
      // import导入的文件称之为：按需加载(webpack)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          // 表头 必填
          header: info.title,
          // 具体数据 必填
          data: info.data,
          // 下载的文件名称
          filename: 'excel-list',
          // 列宽是否自动
          autoWidth: true,
          // 文件后缀名称
          bookType: 'xlsx'
        })
      })
    },
    // 功能1.---获取员工数据列表
    async loadEmployeeList () {
      try {
        // 调用接口获取数据列表
        const ret = await reqGetEmployeeList(this.queryData)
        if (ret.code === 10000) {
          // 将获取到的数据赋值给list让其渲染到页面
          this.list = ret.data.rows
          // 调用接口获取的数据总数赋值给分页里的total
          this.total = ret.data.total
        }
      } catch {
        this.$message.error('获取员工列表失败')
      }
    },
    // 功能2.---监听分页跳转
    changePage (page) {
      // page表示当前页
      this.queryData.page = page
      // 重新渲染数据
      this.loadEmployeeList()
    },
    // 功能2-1 ---切换分页序号问题
    changeIndex (index) {
      // 解构出page,size
      const { page, size } = this.queryData
      return (page - 1) * size + 1 + index
    },
    // 功能3.--- 初始化聘用形式数据(修改值的显示方式)
    // 三种方法---->
    // 1. 基于Vue的过滤器实现
    // 2. 基于作用域插槽和方法
    // 3. 基于formatter属性实现，这是由ElementUI提供的规则
    formOfEmp (row) {
      // 找出符合条件的对象
      const info = Types.hireType.find(item => parseInt(item.id) === parseInt(row.formOfEmployment))
      // 判断有没有符合条件的值，有则返回符合条件的对象里的value值，没有则是其他
      return info ? info.value : '其他'
    },
    // 功能4. ---格式化入职时间---
    // 也可以用过滤器
    // 1.全局注册过滤器
    // 2.value值为模板中解构出来的row.timeOfEntry
    // Vue.filter('formatTime', (value) => {
    // return moment(value).format('yyyy-MM-DD')
    // })
    // 3.在模板中以作用域插槽形式使用
    // <template v-slot="scope">
    //  {{ scope.row.timeOfEntry|formatDate }}
    // </template>
    formOfTime (row) {
      // 利用时间戳实现
      return moment(row.timeOfEntry).format('YYYY-MM-DD')
    },
    // 功能5. ---删除员工
    async handleDelete (id) {
      // 提示用户是否确定删除
      const ret = await this.$confirm('确认要删除员工吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 提示的时候按了取消键就返回
      if (ret === 'cancel') return
      try {
        // 按下确定键，调用接口传过去当前删除的员工的id
        const res = await reqDelEmployee(id)
        // 删除成功
        if (res.code === 10000) {
          // 成功
          // 1.提示
          this.$message.success('删除员工成功')
          // 2.刷新列表
          this.loadEmployeeList()
        } else {
          this.$message.error(res.message)
        }
      } catch {
        this.$message.error('删除员工失败')
      }
    },
    // 功能7. ---添加角色
    handleRole (id) {
      this.userId = id
      this.showRoleDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
